import React, { Component } from 'react';
import TheTable from "@/components/TheTable"
import TheButton from '../../../components/TheButton';
import ThePagination from '../../../components/ThePagination';
import { Button, Form, Input, Modal, Space, DatePicker, Select, Switch, Radio } from "antd";
import { apiTStoreMemberInfoPage, apiTStoreMemberInfoAdd, apiTStoreMemberInfoEdit, apiTStoreMemberInfoDel, apiTStoreMemberInfoView } from '@/request/cashier'
import moment from 'moment'
import { phoneReg } from '@/utils/regexp'
const { Option } = Select
export default class PetManager extends Component {
    constructor() {
        super()
        this.state = {
            cameraList: [],
            memberMobile:'',
            columns: [
                {
                    title: "宠主姓名",
                    dataIndex: "memberRealname",
                    key: "memberRealname",
                },
                {
                    title: "手机号",
                    dataIndex: "memberMobile",
                    key: "memberMobile",
                },
                {
                    title: "生日",
                    dataIndex: "memberBirth",
                    key: "memberBirth",
                },
                {
                    title: "性别",
                    dataIndex: "memberSex",
                    key: "memberSex",
                    render: (text) => {
                        if (text === 1) return '男'
                        if (text === 2) return '女'


                    }
                },
                {
                    title: "余额",
                    dataIndex: "balance",
                    key: "balance",
                    render: (text) => {
                        return (
                            <React.$Price price={Number(text)} />
                        )
                    }
                },
                {
                    title: "备注",
                    dataIndex: "remark",
                    key: "remark",
                },
                {
                    title: "操作",
                    width: 250,
                    render: (text) => {
                        return (
                            <div>
                                <TheButton hasPermi={['cashier:petManager:view']} onClick={()=>this.props.history.push('/cashier/petManager/consume/'+text.memberId)}  >查看消费明细</TheButton>
                                <TheButton hasPermi={['cashier:petManager:petDetail']} onClick={()=>this.props.history.push('/cashier/petManager/'+text.memberId)} >查看宠物信息</TheButton>
                                <TheButton hasPermi={['cashier:petManager:edit']} onClick={() => this.edit(text.storeMemberId)} >编辑</TheButton>
                                <TheButton hasPermi={['cashier:petManager:delete']} onClick={() => this.del(text.storeMemberId)} >删除</TheButton>
                            </div>
                        )
                    }
                }
            ],
            dataSource: [],
            isModalVisible: false,
            storeMemberId: '',
            modalTitle: '新增',
            pageNo: 1, pageSize: 10, total: 0,
            loading: false
        }
    }
    formRef = React.createRef()
    componentDidMount() {
        this.getData()
    }
    async getData() {
        this.setState({ loading: true })
        let { pageSize, pageNo } = this.state
        await apiTStoreMemberInfoPage({ pageSize, pageNo ,memberMobile:this.state.memberMobile?this.state.memberMobile:''}).then(res => {
            if (res.data && res.code === 0) {
                this.setState({
                    dataSource: res.data,
                    pageNo: res.pageNo,
                    pageSize: res.pageSize,
                    total: res.totalCount
                })
            }
        })
        this.setState({ loading: false })
    }
    add() {
        this.setState({
            isModalVisible: true, storeMemberId: '',
            modalTitle: '新增'
        }, () => this.resetForm())
    }
    edit(storeMemberId) {
        this.setState({
            isModalVisible: true,
            storeMemberId: storeMemberId,
            modalTitle: '编辑'

        }, async () => {
            let res = await apiTStoreMemberInfoView({ storeMemberId })
            if (res.code === 0) {
                this.formRef.current.setFieldsValue({
                    memberRealname: res.data.memberRealname,
                    memberMobile: res.data.memberMobile,
                    memberBirth:res.data.memberBirth? moment(res.data.memberBirth):'',
                    memberSex: res.data.memberSex,
                    remark:res.data.remark
                })
            } else {
                React.$message({ type: 'warning', content: res.codeMessage })
            }
        })
    }
    async del(storeMemberId) {
        Modal.confirm({
            title: '提示',
            content: '是否确认删除？',
            onOk: async () => {
                const res = await apiTStoreMemberInfoDel({ storeMemberId })
                if (res.code === 0) {
                    React.$message({ type: 'success', content: res.codeMessage })
                } else {
                    React.$message({ type: 'warning', content: res.codeMessage })
                }
                this.getData()
            },
            onCancel() {
            },
        });
    }
    handleOk = () => {
        this.formRef.current.validateFields().then(async values => {
            values.memberBirth = moment(values.memberBirth).format('YYYY-MM-DD')
            this.setState({
                loading: true
            })
            let res
            if(this.state.storeMemberId){
                res = await apiTStoreMemberInfoEdit({ ...values,storeMemberId:this.state.storeMemberId })
            }else{
                res = await apiTStoreMemberInfoAdd({ ...values })
            }
            if (res.code === 0) {
                React.$message({ type: 'success', content: res.codeMessage })
            } else {
                React.$message({ type: 'warning', content: res.codeMessage })
            }
            this.setState({
                loading: false,
                isModalVisible: false,
                storeMemberId:''
            }, () => {
                this.getData()
            })

        })

    }
    handleCancel = () => {
        this.setState({
            isModalVisible: false, storeMemberId: ''
        })
    }
    resetForm() {
        setTimeout(()=>{
            this.formRef.current.resetFields();
        },1000)
    }
    pageChange = (e) => {
        this.setState({
            pageNo: e
        }, () => {
            this.getData()
        })

    }
    onFinish = (values) => {console.log(values);
        this.setState({
            pageNo:1,
            pageSize:10,
            memberMobile:values.memberMobile
        },()=>{
            this.getData()
        })

    }
    render() {
        let { columns, dataSource, pageNo, pageSize, total, isModalVisible, modalTitle,  loading } = this.state
        return (
            <div className='p-layout-box '>
                <div style={{ marginBottom: 20 }}>
                    <Form
                        layout={'inline'}
                        onFinish={this.onFinish}
                    >
                        <Form.Item
                            name="memberMobile"
                        >
                            <Input allowClear placeholder='手机号' maxLength={15} />
                        </Form.Item>
                        <Form.Item
                        >
                            <Button type='primary' htmlType='submit' >搜索</Button>
                            {/* <TheButton size="middle" type="default" hasPermi={['cashier:petManager:add']} onClick={() => this.add()} >新增</TheButton> */}
                        </Form.Item>
                    </Form>
                </div>
                <TheTable columns={columns} dataSource={dataSource} />
                <ThePagination pageNo={pageNo}
                    pageSize={pageSize}
                    total={total}
                    pageChange={this.pageChange}></ThePagination>
                <Modal title={modalTitle} visible={isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel} confirmLoading={loading}>
                    <Form
                        ref={this.formRef}
                        name="basic"
                        labelCol={{
                            span: 6,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="宠主姓名"
                            name="memberRealname"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入宠主姓名！',
                                },
                            ]}
                        >
                            <Input maxLength={15} />
                        </Form.Item>

                        <Form.Item
                            label="电话"
                            name="memberMobile"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入电话号码！',
                                },
                                {
                                    message: '请输入正确的电话号码！',
                                    pattern: phoneReg
                                }
                            ]}
                        >
                            {
                                modalTitle=='新增'?<Input maxLength={11} />:<Input maxLength={11} readOnly />
                            }
                            
                        </Form.Item>


                        <Form.Item
                            label="生日"
                            name="memberBirth"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择日期！',
                                },
                            ]}
                        >
                            <DatePicker format='YYYY-MM-DD' />
                        </Form.Item>
                        <Form.Item
                            label="性别"
                            name="memberSex"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择性别！',

                                }
                            ]}
                        >
                            <Radio.Group >
                                <Radio value={1}>男</Radio>
                                <Radio value={2}>女</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            label="备注"
                            name="remark"
                            rules={[
                                {
                                    required: false,
                                },
                            ]}
                        >
                            <Input maxLength={150} />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}
